<template>
	<view :style="warpCss" class="overflow-hidden" v-if="goodsList && goodsList[0]">
		<view class="flex justify-between items-center mb-[20rpx]"
			v-if="diyComponent.textImg || diyComponent.subTitle.text">
			<view class="h-[34rpx] flex items-center" v-if="diyComponent.textImg"
				@click="diyStore.toRedirect(diyComponent.textLink)">
				<image class="h-[100%] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix" />
			</view>
			<view class="flex items-center ml-[auto]" v-if="diyComponent.subTitle.text"
				@click="diyStore.toRedirect(diyComponent.subTitle.link)" :style="{ 'color': diyComponent.subTitle.textColor }">
				<text class="text-[24rpx]">{{ diyComponent.subTitle.text }}</text>
				<text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
			</view>
		</view>

		<view class="flex justify-between">
			<!-- 轮播图 -->
			<view class="relative w-[340rpx] overflow-hidden" :style="carouselCss">
				<view v-if="diyComponent.list.length == 1" class="leading-0 overflow-hidden">
					<view @click="diyStore.toRedirect(diyComponent.list[0].link)">
						<image v-if="diyComponent.list[0].imageUrl" :src="img(diyComponent.list[0].imageUrl)" mode="heightFix"
							class="h-[504rpx] !w-full" :show-menu-by-longpress="true" />
						<image v-else :src="img('static/resource/images/diy/figure.png')" mode="heightFix"
							class="h-[504rpx] !w-full" :show-menu-by-longpress="true" />
					</view>
				</view>
				<block v-else>
					<swiper class="swiper ns-indicator-dots-three h-[504rpx]" autoplay="true" circular="true"
						:indicator-dots="isShowDots" @change="swiperChange" :indicator-color="diyComponent.indicatorColor"
						:indicator-active-color="diyComponent.indicatorActiveColor">
						<swiper-item class="swiper-item" v-for="(item) in diyComponent.list" :key="item.id">
							<view @click="diyStore.toRedirect(item.link)">
								<view class="item h-[504rpx]">
									<image v-if="item.imageUrl" :src="img(item.imageUrl)" mode="scaleToFill" class="w-full h-full"
										:show-menu-by-longpress="true" />
									<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill"
										class="w-full h-full" :show-menu-by-longpress="true" />
								</view>
							</view>
						</swiper-item>
					</swiper>
					<!-- #ifdef MP-WEIXIN -->
					<view v-if="diyComponent.list.length > 1" class="swiper-dot-box straightLineStyle2">
						<view v-for="(numItem, numIndex) in diyComponent.list" :key="numIndex"
							:class="['swiper-dot', { active: numIndex == swiperIndex }]"
							:style="[numIndex == swiperIndex ? { backgroundColor: diyComponent.indicatorActiveColor } : { backgroundColor: diyComponent.indicatorColor }]">
						</view>
					</view>
					<!-- #endif -->
				</block>
			</view>

			<view class="w-[340rpx] h-[504rpx] flex flex-col bg-[#fff] box-border overflow-hidden" :style="goodsTempCss"
				@click="toLink(goodsList[0])">
				<view :style="goodsImgCss" class="w-[346rpx] h-[350rpx] overflow-hidden">
					<u--image width="346rpx" height="350rpx" :src="img(goodsList[0].picUrl || '')" model="aspectFill">
						<template #error>
							<image class="w-[346rpx] h-[350rpx]" :src="img('static/resource/images/diy/shop_default.jpg')"
								mode="aspectFill"></image>
						</template>
					</u--image>
				</view>
				<view class="px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
					<view class="text-[#303133] leading-[40rpx] text-[28rpx] truncate"
						:style="{ color: diyComponent.goodsNameStyle.color, fontWeight: diyComponent.goodsNameStyle.fontWeight }">
						{{ goodsList[0].titleName }}
					</view>
					<view class="flex justify-between flex-wrap items-baseline mt-[28rpx]">
						<view class="flex items-center">
							<view class="text-[var(--price-text-color)] price-font truncate max-w-[200rpx]"
								:style="{ color: diyComponent.priceStyle.mainColor }">
								<text class="text-[24rpx] font-400">￥</text>
								<text class="text-[40rpx] font-500">{{
									parseFloat(diyGoods.goodsPrice(goodsList[0])).toFixed(2).split('.')[0]
								}}</text>
								<text class="text-[24rpx] font-500">.{{
									parseFloat(diyGoods.goodsPrice(goodsList[0])).toFixed(2).split('.')[1]
								}}</text>
							</view>
							<image v-if="diyGoods.priceType(goodsList[0]) == 'member_price'" class="max-w-[50rpx] h-[28rpx] ml-[6rpx]"
								:src="img('addon/shop/VIP.png')" mode="heightFix" />
						</view>

						<view class="w-[44rpx] h-[44rpx] bg-[red] flex items-center justify-center rounded-[50%]"
							:style="{ backgroundColor: diyComponent.saleStyle.color }">
							<text class="iconfont iconjia  font-500 text-[32rpx] text-[#fff]"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
// 精选推荐
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import { getGoodsComponents } from '@/addon/shop/api/goods';
import { useGoods } from '@/addon/shop/hooks/useGoods'

const diyGoods = useGoods();
const props = defineProps(['component', 'index', 'pullDownRefreshCount', 'value']);
const diyStore = useDiyStore();

const goodsList = ref<Array<any>>([]);

const diyComponent = computed(() => {
	if (props.value) {
		return props.value;
	} else if (diyStore.mode == 'decorate') {
		return diyStore.value[props.index];
	} else {
		return props.component;
	}
})

// 轮播指示器
let isShowDots = ref(true)
// #ifdef H5
isShowDots.value = true;
// #endif

// #ifdef MP-WEIXIN
isShowDots.value = false;
// #endif

const warpCss = computed(() => {
	var style = '';
	style += 'position:relative;';
	if (diyComponent.value.componentStartBgColor) {
		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
		else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	}

	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	return style;
})

const goodsTempCss = computed(() => {
	var style = '';
	if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
	if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
	if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';

	if (diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both * 4) + 'rpx - 20rpx) / 2);'
	else style += 'width: calc((100vw - 20rpx) / 2 );'
	return style;
})

const goodsImgCss = computed(() => {
	var style = '';
	if (diyComponent.value.topElementRounded) style += 'border-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
	return style;
})

const carouselCss = computed(() => {
	var style = '';
	if (diyComponent.value.topCarouselRounded) style += 'border-top-left-radius:' + diyComponent.value.topCarouselRounded * 2 + 'rpx;';
	if (diyComponent.value.topCarouselRounded) style += 'border-top-right-radius:' + diyComponent.value.topCarouselRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomCarouselRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomCarouselRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomCarouselRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomCarouselRounded * 2 + 'rpx;';

	if (diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both * 4) + 'rpx - 20rpx) / 2);'
	else style += 'width: calc((100vw - 20rpx) / 2 );'
	return style;
})

watch(
	() => props.pullDownRefreshCount,
	(newValue, oldValue) => {
		// 处理下拉刷新业务
	}
)

const getGoodsListFn = () => {
	let data = {
		num: 1,
		spuIds: diyComponent.value.source == 'custom' ? diyComponent.value.goods_ids : ''
	}
	getGoodsComponents(data).then((res) => {
		goodsList.value = res.data;
	});
}

onMounted(() => {
	refresh();
	// 装修模式下刷新
	if (diyStore.mode != 'decorate') {
		watch(
			() => diyComponent.value,
			(newValue, oldValue) => {
				refresh();
			},
			{ deep: true }
		)
	}
});

const refresh = () => {
	// 装修模式下设置默认图
	if (diyStore.mode == 'decorate') {
		let obj = {
			picUrl: "",
			titleName: "商品名称",
			sale_num: "100",
			unit: "件",
			goodsSku: { price: 100 }
		};
		goodsList.value.push(obj);
	} else {
		getGoodsListFn();
	}
}

const toLink = (data: any) => {
	redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.spuId } })
}

const swiperIndex = ref(0);
const swiperChange = e => {
	swiperIndex.value = e.detail.current;
};
</script>

<style lang="scss" scoped>
.swiper.ns-indicator-dots-three :deep(.uni-swiper-dots-horizontal) {
	bottom: 12rpx;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot) {
	width: 8rpx;
	height: 8rpx;
	border-radius: 8rpx;
	margin-right: 14rpx;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot):last-of-type {
	margin-right: 0;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot-active) {
	width: 30rpx;
}

.swiper-dot-box {
	position: absolute;
	bottom: 4rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 80rpx 8rpx;
	box-sizing: border-box;

	.swiper-dot {
		background-color: #b2b2b2;
		width: 10rpx;
		border-radius: 50%;
		height: 10rpx;
		margin: 8rpx;
	}

	&.straightLineStyle2 {
		.swiper-dot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 8rpx;
			margin: 0;
			margin-right: 14rpx;

			&.last-of-type {
				margin-right: 0;
			}

			&.active {
				width: 30rpx;
			}
		}
	}
}
</style>
